<!--  
查看运行RestCall信息 DLG
通过调用子控件方法,弹出窗口,并传递参数,对父控件改动较小
调用方式
引入 
  import RestInfoDLG from '@/components/AIT/RunTimeDlg/RestInfo';
  components: { RestInfoDLG },
模板
  <RestInfoDLG ref="RestInfoDLG"></RestInfoDLG>
方法
  handleRestInfo() {
    // 通过调用子控件方法,弹出窗口,并传递参数
    this.$refs.RestInfoDLG.openDlg(this.flowCode);
  },
-->
<template>
  <el-dialog :title="title" :visible.sync="isShow" width="80%" append-to-body>
    <el-tabs v-model="activeName">
      <el-tab-pane label="接口列表" name="main">
        <!-- 表头FORM -->
        <el-form
          ref="form"
          v-loading="loading"
          :model="form"
          label-width="80px"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="流程编码" prop="flowCode">
                {{ form.flowCode }}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="流程名称" prop="flowName">
                {{ form.flowName }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 明细行 -->
        <el-row>
          <el-table
            :data="dataList"
            ref="dataList"
            border
            @current-change="handleCurrentChange"
            @row-click="handleRowClick"
            style="height: 430px"
            :row-style="{ height: '32px' }"
            :cell-style="{ padding: '0px' }"
            highlight-current-row
          >
            <el-table-column
              label="方法"
              prop="method"
              width="80"
            ></el-table-column>
            <el-table-column label="地址" prop="url"></el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>

      <el-tab-pane label="详细信息" name="detail">
        <!-- 明细FORM -->
        <el-form
          ref="detailform"
          v-loading="loading"
          :model="curRow"
          label-width="80px"
          @submit.native.prevent
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="方法" prop="method">{{
                curRow.method
              }}</el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="头信息" prop="head">
                <el-input v-model="curRow.head" placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="url">
                <el-input v-model="curRow.url" placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div>调用参数</div>
              <el-input 
                v-model="curRow.body" 
                type="textarea" 
                placeholder="请输入内容" 
                :rows="12" 
                style="font-size: 10px;"
              />
            </el-col>
            <el-col :span="24">
              <div>返回数据</div>
              <pre style="margin-top: -16px">
                <code style="height: 260px;" class="hljs" v-html="highlightedCode(curRow.response)"/>
              </pre>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCopy(1)" icon="el-icon-copy-document" type="info" :disabled="!curRow.url">拷贝(地址)</el-button >
      <el-button @click="handleCopy(2)" icon="el-icon-copy-document" type="info" :disabled="!curRow.body">拷贝(调用参数)</el-button >
      <el-tooltip content="选择接口列表方法,重新发起远程调用" placement="top-start" effect="dark">
        <el-button @click="handleRun" icon="el-icon-video-play" type="primary" :disabled="!curRow.url">执 行</el-button >
      </el-tooltip>
      <el-button @click="closeDlg" icon="el-icon-circle-close" type="primary" >关 闭</el-button >
    </div>
  </el-dialog>
</template>

<script>
import copy from "copy-to-clipboard";
import { loadRunCallInfo,loadLogCallInfo,restCallRun } from "@/api/aitcommon/aitconfig";
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/vs2015.css";
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));

export default {
  name: "RestInfoDLG",
  data() {
    return {
      isShow: false,
      loading: false,
      title: "REST调用信息",
      form: {},
      dataList: [],
      curRow: {},
      activeName: "main",
    };
  },
  methods: {
    //rest 调用
    handleRun(){
      if (!this.isShow) return;
      if(!this.curRow.url){
        this.msgError("未选中行");
        return;
      }
      this.loading = true;
      restCallRun(this.curRow)
        .then((res) => {
          // 返回可能是空,flowCode必须有值
          console.info('handleRun:',res.data)
          this.curRow = { ...res.data };
          // this.dataList = res.data.restCall;
          // console.info("loadData", this.form, this.dataList);
        })
        .finally((res) => {
          this.msgSuccess("执行完成!");
          this.loading = false;
        });
    },
    handleRowClick(row){
      if(row){
        this.activeName='detail'
      }
    },
    handleCurrentChange(row) {
      if (row){
        this.curRow = row;
        // this.activeName='detail'
      } 
    },
    // 高亮代码
    highlightedCode(text) {
      let text1 = text || "";
      // console.info('highlightedCode',text)
      // text1=JSON.stringify(text1,null,'\t');
      // console.info('highlightedCode',text1)
      let ret = hljs.highlight("json", text1);
      return ret.value;
    },
    // 通过函数打开对话框,子控件参数也通过函数传入
    // 相比通过属性传入参数,这种做法代码简单
    // 打开对话框
    openDlg(code, callBack = () => {}) {
      this.form.flowCode = code;
      this.callBack = callBack;
      this.isShow = true;
      this.activeName = "main";
      this.curRow={};
      this.loadData();
    },
    // 打开日志记录对应的REST信息
    openLogDlg(logID,code, callBack = () => {}) {
      this.form.flowCode = code;
      this.callBack = callBack;
      this.isShow = true;
      this.activeName = "main";
      this.logID=logID;
      this.loadLogData();
    },
    // 关闭对话框
    closeDlg() {
      this.isShow = false;
      this.reset();
      this.callBack();
    },
    // 加载运行信息
    loadData() {
      if (!this.isShow) return;
      this.loading = true;
      loadRunCallInfo(this.form.flowCode)
        .then((res) => {
          // 返回可能是空,flowCode必须有值
          this.form = { ...res.data };
          this.dataList = res.data.restCall;
          // console.info("loadData", this.form, this.dataList);
        })
        .finally((res) => {
          this.loading = false;
        });
    },
    loadLogData(){
      if (!this.isShow) return;
      this.loading = true;
      loadLogCallInfo(this.logID)
        .then((res) => {
          // 返回可能是空,flowCode必须有值
          this.form = { ...res.data };
          this.dataList = res.data.restCall;
          // console.info("loadData", this.form, this.dataList);
        })
        .finally((res) => {
          this.loading = false;
        });
    },
    // 拷贝至粘贴板
    handleCopy(val) {
      if(val==1){
        // 拷贝地址
        if(this.curRow){
          copy(this.curRow.url);
          this.$message("内容已拷贝至粘贴板!");
        }
      }else if(val==2){
        // 拷贝调用参数
        if (this.curRow) {
          copy(this.curRow.body);
          this.$message("内容已拷贝至粘贴板!");
        }
      }
      
    },
    reset() {
      let flowCode = this.form.flowCode;
      this.form = { flowCode };
      this.dataList = [];
      this.curRow = {};
    },
  },
};
</script>

<style lang="scss" scoped>
.single-content {
  /* 文本不换行 */
  white-space: nowrap;
  /* 超出隐藏 */
  // overflow: hidden;
  overflow: auto;
  /* 超出的文字省略号表示 */
  text-overflow: ellipsis;
}
</style>
